<template>
  <el-card class="homeMain-card" style="max-height: 750px">
    <template #header class="header">
      <div style="margin-left: auto; width: auto">
        <el-button @click="openEdit">新增</el-button>
        <el-button>未完成</el-button>
      </div>
    </template>
    <template #default style="flex: 1">
      <el-table
        :data="members.slice((curPage - 1) * pageSize, curPage * pageSize)"
        stripe
        style="width: 100%; flex: 1"
      >
        <el-table-column prop="id" label="#" width="60" />
        <el-table-column prop="mname" label="姓名" width="100" />
        <el-table-column prop="gender" label="性别" width="60" />
        <el-table-column prop="tel" label="电话" />
        <el-table-column prop="birth" label="生日">
          <template #default="scope">
            <el-tag>{{
              scope.row.birth === null
                ? '未知'
                : this.$formatDate(scope.row.birth, 'YYYY年MM月DD日')
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="rname" label="角色">
          <template #default="scope">
            <el-tag>{{ scope.row.rname }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" />
        <el-table-column label="状态" width="180">
          <template #default="scope">
            <el-switch
              v-model="scope.row.state"
              :active-value="1"
              :inactive-value="0"
              @click="statechange(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template #footer style="height: 50px">
      <el-pagination
        v-model:current-page="curPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="members.length"
      />
    </template>
  </el-card>

  <!-- 弹出式对话框 -->
  <el-dialog v-model="dialogVisible" width="500">
    <!-- 自定义头部 -->
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">编辑成员信息</h4>
      </div>
    </template>
    <!-- 对话框内容 -->
    <el-form
      ref="ruleFormRef"
      :model="roleForm"
      :rules="rules"
      :label-position="'right'"
      style="max-width: 600px"
    >
      <el-form-item label="成员名称" prop="mname" required>
        <el-input clearable v-model="roleForm.mname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" prop="gender" required>
        <el-radio-group v-model="roleForm.gender">
          <el-radio value="男">男</el-radio>
          <el-radio value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" prop="tel" required>
        <el-input v-model="roleForm.tel" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="roleid" required>
        <el-select v-model="roleForm.roleid">
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.rname"
            :value="item.id"
            :disabled="item.nbl === 0"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="生日" required>
        <el-col :span="11">
          <el-form-item prop="birth">
            <el-date-picker
              v-model="roleForm.birth"
              type="date"
              aria-label="Pick a date"
              placeholder="Pick a date"
              style="width: 100%"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeForm()" :icon="CloseBold"> 取消 </el-button>
        <el-button type="primary" :icon="Promotion" @click="submitForm()"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import $ajax from 'axios'

import { useMembers } from '@/stores/nepm/member.js'
import { storeToRefs } from 'pinia'
import { CircleCloseFilled, CloseBold, Promotion } from '@element-plus/icons-vue'
import { ElButton, ElDialog } from 'element-plus'

const member = useMembers()
const { members, curPage, pageSize, dialogVisible, roleForm, rules, roles, role } =
  storeToRefs(member)

const ruleFormRef = ref(null)

const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    member.saveForm()
    console.log('校验结果', valid)
    member.closeEdit()
  })
}

const closeForm = () => {
  member.closeEdit()
}

const loadrole = () => {
  member.loadData()
  member.loadRole()
  console.log(roles)
}

const statechange = (row) => {
  member.stateChange(row)
}

onMounted(() => {
  loadrole()
  console.log('on mounted')
  console.log(member.getRoles)
})

const openEdit = () => {
  member.openEdit()
}
</script>

<style lang="scss" scoped>
.homeMain-card {
  width: 100%;

  .header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
